import { View, Text, Image, ITouchEvent, Picker, RadioGroup, Radio } from '@tarojs/components'
import { useLoad } from '@tarojs/taro';
import classNames from 'classnames';
import { useState } from 'react'
import './index.scss'

export default function News() {
  const [list, setList] = useState([
    {
      title: '1.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
    {
      title: '1.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
    {
      title: '1.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
    {
      title: '1.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
    {
      title: '1.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
    {
      title: '6.以下哪种说法关于疫苗是正确的？',
      options: [
        {value:'疫苗是一种治疗疾病的药物', checked: false},
        {value: ' 疫苗通常包含弱化或死亡的病原体或其部分', checked:false},
        {value: '疫苗可以立即消除疾病的症状', checked: false},
        {value: '疫苗只对儿童有效', checked: false},
      ],
    },
  ]);
  const [selected, setSelected] = useState<{}>({});
  useLoad(() => {
    console.log('Page loaded.')
  })

  const onClickOption = (item, e: any) => {
    const value = e.detail.value

    if (selected[item.title] && selected[item.title] === value) {
      selected[item.title] = ''
    } else {
      selected[item.title] = value;
    }
    setSelected(selected);
    const newList = list.map(v => {
      if (v.title === item.title) {
        v.options = v.options.map((op) => {
          op.checked = op.value === value;
          return op;
        });
      }
      return v;
    })
    setList(newList);
  }

  console.log(list, 'list');
  return (
    <View className='detail min-h-screen pb-safe-offset-6 px-4 relative'>
      {
        list.map((item, index) => {
          return (
            <View className='mb-[30px]' key={index}>
              <View>{item.title}</View>
              <View>
                
                {
                  item.options.map((option, i) => {
                    
                    return (
                      <View key={i}>
                        <RadioGroup onChange={(e) => onClickOption(item, e)}>
                          <Radio value={option.value} checked={option.checked}>
                            {option.value}
                          </Radio>
                        </RadioGroup>
                      </View>
                    )
                  })
                }
              </View>
            </View>
          )
        })
      }
      <View className='fixed bottom-[44px] bg-transparent left-0 right-0 h-[64px] flex flex-row justify-center'>
        <View className='bg-[#4A9BF7] rounded-[8px] w-[130px] h-[64px] text-center text-white text-[36px] leading-[64px]'>
          提交
        </View>
      </View>
    </View>
  )
}
